import { Application, Graphics, Sprite, Texture, Container } from "pixi.js";
import logo from "./assets/logo.png";

// pixi -> init
const game = new Application({
  width: 500,
  height: 500,
});

// canvas 的实例
document.body.append(game.view);
const rect = createRect();
rect.x = 100;
rect.y = 100;
// canvas 的根容器
// append()
const img = createImg();
// 点击事件
img.interactive = true;
img.on("pointertap", () => {
  console.log("click");
});

const box = new Container();
console.log(box)
box.addChild(rect);
box.addChild(img);
box.x = 150;
box.y = 150;


// 图片给它动起来
// game.ticker.add(() => {
//   img.x++;
// });

game.stage.addChild(box);

// 比如图片
function createImg() {
  const img = new Sprite();
  console.log(logo);
  img.texture = Texture.from(logo);
  return img;
}

// 怎么添加到 canvas 里面的
// 容器的概念
// <div id="container"><button></button></div>

// 绘制一个矩形
function createRect() {
  const rect = new Graphics();
  rect.beginFill(0xff0000);
  // rect.drawRect(0,0,50,50)
  rect.drawCircle(0, 0, 50);
  rect.endFill();
  return rect;
}
